<template>
  <div>
    <div class="mt-3">
      <el-input  style="width: 200px;" v-model="phone" placeholder="请输入手机号"></el-input>
      <el-button type="primary" class="mx-3" icon="el-icon-search" @click="queryPhone">查询</el-button>
      <el-radio
        v-model="choice"
        v-for="(item,index) in statusArr"
        :key="index"
        :label=item.status
        border
        @change="selectData(item.status)"
      >
        {{item.status_link}}({{item.count}})
      </el-radio>
    </div>
    <!--表格-->
    <div class="border mt-5">
      <!--<div class="d-flex py-3 pl-3 justify-content-between px-3">-->
      <!--<div><span style="font-size: 20px;">数据列表</span>&nbsp;&nbsp;<span class="text-warning">共0条数据</span></div>-->
      <!--<div>-->
      <!--<el-button type="primary">导入<i class="el-icon-upload2 el-icon&#45;&#45;right"></i></el-button>-->
      <!--<el-button type="primary">导出<i class="el-icon-download el-icon&#45;&#45;right"></i></el-button>-->
      <!--</div>-->
      <!--</div>-->
      <el-table
        :data="tableData"
        :header-cell-style="getRowClass"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="app"
          label="app"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地区"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="pass"
          label="通道"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          label="号码"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <span>{{tel(scope.row.phone)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="拨号"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="telephone(scope.$index, scope.row)" type="primary">拨号</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <el-input style="width: 80%" v-model="scope.row.remark" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="block mt-3 float-right">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {intention, status, select, query} from '../apis/intentionClient'
  import {callPhone} from '../apis/previewClient'
  export default {
    data(){
      return {
        phone: '',
        statusArr: [],
        choice: '1',
        tableData: [
          // {
          //   id: 1,
          //   app: 'QQ',
          //   date: '2016-05-02',
          //   address: '上海市普陀区金沙江路 1518 弄',
          //   pass: '通道1',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 2,
          //   app: '微信',
          //   date: '2016-05-04',
          //   address: '上海市普陀区金沙江路 1517 弄',
          //   pass: '通道2',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 3,
          //   app: '美团',
          //   date: '2016-05-01',
          //   address: '上海市普陀区金沙江路 1519 弄',
          //   pass: '通道3',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 4,
          //   app: '大众点评',
          //   date: '2016-05-03',
          //   address: '上海市普陀区金沙江路 1516 弄',
          //   pass: '通道4',
          //   phone: '12345678912',
          //   remark: '备注1'
          // }
        ],
        currentPage: 4,
        total: 0,
        apps: [
          {
            value: '选项1',
            label: '微信'
          },
          {
            value: '选项2',
            label: 'QQ'
          },
          {
            value: '选项3',
            label: '美团'
          },
          {
            value: '选项4',
            label: '大众点评'
          },
          {
            value: '选项5',
            label: '滴滴出行'
          }
        ],
        appValue: ''
      }
    },
    async mounted(){
      const result = await intention('10', '1');
      // console.log('result:', result);
      if(result.data.data.length > 0){
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        })
      }
      this.total = result.data.mate.total;
      const statusRes = await status(localStorage.getItem('token'));
      console.log('statusRes:', statusRes.data.data);
      this.statusArr = statusRes.data.data
    },
    methods: {
      // 方法
      // 设置表格第一行的颜色
      getRowClass({ rowIndex }) {
        if (rowIndex === 0) {
          return 'background: #F5F7FA'
        } else {
          return ''
        }
      },

      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      // },
      async handleCurrentChange(val) {
        // console.log(`handleCurrentChange方法`);
        const result = await intention('10', val);
        this.tableData = [];
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        });
      },
      async telephone(index, row) {
        // console.log(index, row);
        // console.log('拨号中。。。。');
        // console.log('本地：', localStorage.getItem('token'));
        const result = await callPhone(localStorage.getItem('token'), row.phone);
        // console.log('result111111111111111:', result.data.data[0]);
        this.$confirm(result.data.data[0], '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '正在拨号中。。。'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消拨打'
          });
        });
        // const loading = this.$loading({
        //   lock: true,
        //   text: '拨号中...',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)'
        // });
        // setTimeout(() => {
        //   loading.close();
        // }, 2000);
      },
      async selectData(status){
        const result = await select('10', '1',  status);
        // console.log('result:', result);
        this.tableData = [];
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        });
        this.currentPage = result.data.mate.current_page;
        this.total = result.data.mate.total;
      },
      async queryPhone(){
        const result = await query(localStorage.getItem('token'), this.phone);
        // console.log('查询手机号', result);
        this.tableData = [];
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        });
        this.currentPage = result.data.mate.current_page;
        this.total = result.data.mate.total;
      }
    }
  }
</script>

<style scoped>

</style>